En este post vamos a ver los diferentes diseños de header (encabezamiento, parte superior de la página web) disposición de logo y elementos de menú que podemos realizar con WordPress y la plantilla Divi. Para poder utilizar todas las funcionalidades que voy a comentar debemos tener por lo menos la versión 2.6 de la plantilla Divi para WordPress.

El diseño del encabezamiento o header será igual en todas las páginas del sitio web.

En este post puedes ver opciones de diseño del footer

 

DESCUENTO PLANTILLA DIVI

 

DISFRUTA DE TODOS MIS CURSOS PREMIUM POR SOLO 10€/MES


VER CURSOS

 

 

 

ÍNDICE DEL POST

 

1.- Diseño de menú flotante, fijo o sticky (pegajoso) VS Diseño de menú tradicional con WordPress y Divi

2.- Diseño de menú NO Sticky con logo centrado y de grandes dimensiones con Divi

3.- Diseño de menú con logo situado a la izquierda, de la manera tradicional

4.- Diseño de menú con logo centrado situado encima del menú con Divi y WordPress

5.- Diseño de menú con logo en la línea de los elementos del menú con WordPress y Divi

6.- Diseño de menú tipo Hamburguer (Hamburguesa) deslizante con WordPress y la plantilla Divi

7.- Diseño de menú hamburguer (hamburguesa) a pantalla completa (full screen header) con WordPress y Divi

8.- Ocultar navegación hasta que haya desplazamiento

 

 

 

1.- DISEÑO DE MENÚ FLOTANTE, FIJO O STICKY (PEGAJOSO) VS DISEÑO MENÚ TRADICIONAL CON WORDPRESS Y DIVI

 

La plantilla Divi para WordPress nos permite dos grandes tipos de header o encabezamiento para una página web y/o blog:

 

 

1.1.- Diseño de header Flotante, fijo o sticky (Pegajoso):

 

En este tipo de encabezamiento de página web, el menú queda fijo cuando hacemos scroll hacia abajo.

Es decir, aunque bajemos con la rueda del ratón o con las barras de scroll del navegador, el menú no desaparecerá. El menú y el logo siempre permanecerán visibles.

Este tipo de header está bastante de moda, pues mejora la usabilidad del usuario, ya que éste siempre tiene a mano el menú de navegación de la web, que es “el plano” del sitio a través del cual el usuario se guía para dirigirse a las zonas fundamentales de la web.

 

Añade más de 90 nuevas funcionalidades a la plantilla Divi con el fabuloso plugin: Divi Booster

 

El inconveniente que tiene este tipo de header es que disminuye el espacio de visión disponible para la web. Además hoy en día todos tenemos barras, favoritos y otros elementos en el navegador que reducen aún más el espacio de visión disponible para el usuario. Por este motivo es fundamental que la altura que ocupa el sticky menú sea lo menor posible. Luego veremos que la plantilla Divi nos permite incluso eliminar el logo cuando se produce el scroll de sobre la página, disminuyendo de esta manera la altura del sticky menú.

 

Si lo que quieres ver son las opciones de Divi para su header y menú en móviles, mira este post: header y menú en móviles con Divi

 

En la plantilla DIVI para WordPress por defecto está activada la opción de menú sticky o menú pegajoso.

En el siguiente apartado veremos cómo podemos desactivar esta opción.

 

 

Aprende a crear una barra de menú transparente con WordPress y Divi, sus ventajas e inconvenientes.

 

 

1.2.- Diseño de header con menú tradicional (no sticky):

 

En este tipo de menú cuando el usuario hace scroll sobre cualquiera de las páginas del sitio web, el menú desaparece de la vista de éste. Para poder acceder al menú será necesario volver a hacer scroll, pero esta vez hacia arriba. Al llegar a la parte superior de la página el usuario volverá a ver el menú de navegación del sitio web.

 

 

Desactivar el menú sticky (Pegajoso) en Divi:

 

Como antes he dicho, por defecto en la plantilla Divi de WordPress viene activado el menú flotante, fijo o sticky (pegajoso).

Para desactivarlo debemos ir a: “Panel de administración > Divi > Opciones del tema”.

En la pestaña “General” tenemos una opción denominada: “Barra de navegación fija”. Aquí debemos poner el selector en “Desactivar”.

A continuación bajaremos a la parte inferior de la página y pulsaremos el botón de “guardar cambios”

 

opción de menú flotante con WordPress

Configurar la opción de menú pagajoso (sticky) con WordPress y Divi

 

 

2.- DISEÑO MENÚ NO STICKY CON LOGO CENTRADO Y DE GRANDES DIMENSIONES CON DIVI

 

En determinados tipos de páginas web a los diseñadores les gusta poner un logo de grandes dimensiones en la cabecera o header de las páginas del sitio web.

Para establecer el logo en la parte superior debemos subir un logo de grandes dimensiones. Dependiendo de la proporción puede ser de diferentes dimensiones. Con las proporciones de mi logo las máximas dimensiones posibles son aprox. de 870×261 px.

 

Como poner un logo centrado y grande con WordPress

Logo de grandes dimensiones centrado

 

 

Subir logo

 

Para subir el logo debes ir a: “panel de administración > Divi > Opciones del tema”. Ahora en la pestaña general haremos clic en “Subir” en el apartado “Logo”. A continuación pulsaremos el botón de “Guardar cambios”.

 

 

Poner logo centrado

 

Para poner el logo centrado encima de los elementos del menú iremos a: “panel de administración > Divi > Opciones del tema”.

Ahora iremos a: “Cabecera y navegación > Formato de cabecera”. Aquí elegiremos la opción: “Estilo de cabecera -> Centrado”. A continuación pulsaremos el botón de “Guardar y publicar” de la parte superior.

 

Centrar logo con la plantilla Divi de Elegant Themes

Poner logo centrado en el header

 

 

Poner el logo a máxima dimensión:

 

Para poner el logo al tamaño más grande en Divi iremos a: “panel de administración > Divi > Personalizador de temas”.

Ahora iremos a: “Cabecera y navegación > Barra de menú principal”.

En el apartado: “Menú altura” seleccionaremos el máximo y en “Logo max altura” también seleccionaremos el máximo. A continuación pulsaremos el botón de “Guardar y publicar”.

Nota: si queremos aumentar un poco el margen entre el logo y los ítems de menú tendremos que recudir un poco el tamaño del logo con la opción “Logo max altura”.

 

Poner el logo en máximo tamaño con WordPress

Máximo tamaño para el logo

 

 

Como este tipo de logos ocupan mucha altura y disminuyen mucho el área de visión de la web tenemos dos opciones:

 

i.- Menú NO Sticky: sería necesario utilizar un menú del tipo NO sticky o pegajoso para que al hacer scroll el encabezamiento desaparezca y el campo de visión sea total. En el punto 1.2 puedes ver el proceso para configurar el menú como no pegajoso.

ii.- Menú sticky sin logo: si queremos poner el menú fijo, flotante o sticky (pegajoso) debemos establecer que el logo desaparezca cuando se comience a hacer scroll. De esta manera el menú quedará fijo, pero sin el logo que es lo que ocupa más espacio.

Para establecer que el logo desaparezca cuando se hace scroll debemos ir a: “panel de administración > Divi > Personalizador de temas”.

Ahora iremos a: “Ajustes de navegación fija” y marcaremos el check box: “Ocultar imagen de logotipo”.

Ahora pulsaremos el botón “Guardar y publicar” situado en la parte superior.

 

Ocultar logo en el menú sticky o fijo

Ocultar logo en el menú flotante o pegajoso

 

 

 

 

3.- DISEÑO DE MENÚ CON LOGO SITUADO A LA IZQUIERDA DE LA MANERA TRADICIONAL

 

El tipo de header o encabezamiento que viene configurado por defecto en la plantilla Divi para WordPress es con el logo a la izquierda y los elementos del menú a la derecha.

Este diseño de encabezamiento puede ser flotante o no flotante.

En el apartado 1.2- hemos visto donde están las opciones para configurar un menú flotante o  fijo, también denominado sticky (pegajoso)

Seleccionar el diseño de header tradicional con WordPress y Divi

 

Para seleccionar este tipo de diseño de header debemos ir a: “panel de administración > Divi > Personalizador de temas”

A continuación iremos a “cabecera y navegación > Formato de cabecera”. Aquí seleccionaremos: “Por defecto”.

A continuación pulsa el botón de “Guardar y publicar”

Nota: si no se ve el header correctamente ve a “Cabecera y navegación > Barra de menú principal” y modifica los parámetros de Menú altura y Logo Max altura.

 

distribución de logo habitual en webs

Menú con logo a la izquierda e items de menú a la derecha

 

 

4.- DISEÑO DE MENÚ CON LOGO CENTRADO SITUADO ENCIMA DEL MENÚ CON DIVI Y WORDPRESS.

 

En el apartado 2.- hemos visto como configurar un encabezamiento con el logo centrado y situado por encima de los elementos del menú.

Además en dicho apartado hemos visto cómo poner un logo de grandes dimensiones con la plantilla Divi.

 

Para la parte que nos ocupa en este punto que es solo poner el logo centrado por encima de los elementos del menú en la plantilla WordPress Divi tendremos que:

Ir a: “panel de administración > Divi > Opciones del tema”.

Después iremos a “Cabecera y navegación > Formato de cabecera”. Aquí elegiremos la opción: “Estilo de cabecera -> Centrado”. Ahora haremos clic sobre el botón de “Guardar y publicar” situado en la parte superior.

 

Logo centrado en WordPress y situado por encima del menú

Logo centrado en la cabecera de la web por encima del menú

 

 

 

5.- DISEÑO DE MENÚ CON LOGO EN LA LÍNEA DE LOS ELEMENTOS DEL MENÚ CON WORDPRESS.

 

Otra posible cabecera o header en Divi es poner el logo centrado en encabezamiento pero en línea con los elementos del menú. Es decir, el logo aparecerá en el centro del menú con elementos a la izquierda y derecha.

 

Logo centrado en la linea de menú con WordPress

Logo en línea con los elementos del menú y centrado

 

Para configurar este tipo de cabecera debes ir a: “panel de administración > Divi > Personalizador de temas > Cabecera y navegación > Formato de cabecera “. Ahora, en “Estilo de cabecera” debes elegir: “Logotipo centrado en línea”

 

Si quieres hacer el menú tipo sticky (pegajoso) puedes combinarlo haciendo que el logo desaparezca cuando se comience a hacer scroll. Para ello deberás ir a: “panel de administración > Divi > Personalizador de temas > Cabecera y navegación > Ajustes de navegación fija”. Si marcas la opción: “Ocultar imagen del logotipo” esta desaparecerá cuando se comience a hacer scroll.

 

 

6.- DISEÑO DE MENÚ TIPO HAMBURGUER (HAMBURGUESA) DESLIZANTE CON WORDPRESS Y DIVI (SLIDE –IN HEADER)

 

Los menús tipo hamburguesa se pusieron de moda con la aparición de los smartphones. Seguro que has visto el típico botón formado por tres líneas horizontales. Eso es un menú tipo hamburguer – hamburguesa.

 

Menu tipo hamburguesa en WordPress

Menú hamburguesa o hamburguer

 

Los menús tipo hamburguesa se hicieron necesarios en las versiones móviles de los sitios web, ya que no era posible incluir todos los ítems de un menú de la manera tradicional y que se pudiera leer adecuadamente en el móvil. Al accionar el botón tipo hamburguer se desplegaba un menú vertical que si era fácil de visualizar en dispositivos móviles.

Poco a poco hemos ido relacionando el icono del botón tipo Hamburguer con un botón desplegable de menú.

Lo que ha ocurrido estos últimos años es que el hamburguer menú está tomando terreno también en las web visualizadas en ordenadores. El menú hamburguesa está de moda en diseño web.

Las principal ventaja del menú hamburguesa es que ofrece un diseño más limpio de la cabecera o hader de la web, y que su diseño vale para móviles y escritorio. El inconveniente es que puede haber personas que aún no sepan que al accionar ese tipo de botón aparecerá el menú de la web. Eso sí, cada vez son menos pues este tipo de menú está muy extendido en móviles, y hoy en día pocos no usan un Smartphone.

 

La plantilla Divi para WordPress (a partir de Divi 2.6) nos ofrece dos diseños de menú diferentes tipo hamburguesa. Vamos a ver en este punto el tipo deslizante y en el siguiente punto veremos el tipo pantalla completa.

 

 

Configurar menú hamburguesa deslizante (slide – in header)

 

En este tipo de menú, cunando accionamos el botón tipo hamburguer aparece deslizándose de derecha a izquierda un sidebar con los elementos del menú.

Para seleccionar este tipo de menú iremos a: “panel de administración > Divi > Personalizador de temas > Cabecera y navegación > Formato de cabecera”.

En “estilo de cabecera” seleccionaremos “Deslizar” y pulsaremos “Guardar y publicar”.

 

 

Diseño del menú slide – in header

 

Para personalizar el diseño del menú deslizante deberás acceder a “panel de administración > Divi > Personalizador de temas > Cabecera y navegación > Deslizar y Ajustes de título en pantalla completa” (este último apartado se crea nuevo al seleccionar este tipo de menú).

 

Personalizar diseño del menú hamburguesa deslizante de Divi

Personalizar el menú hamburguer deslizante Divi

 

 

 

 

7.- DISEÑO DE MENÚ HAMBURGUER (HAMBURGUESA) A PANTALLA COMPLETA CON WORDPRESS Y DIVI (FULL SCREEN HEADER)

 

Con WordPress y más concretamente con la plantilla Divi podemos crear otro tipo diferente de menú tipo hamburguer. En este tipo de menú cuando hacemos clic sobre el botón nos aparece el menú a pantalla completa.

 

 

Configurar menú hamburguesa a pantalla completa o Full Screen Header

 

Para seleccionar este tipo de menú iremos a: “panel de administración > Divi > Personalizador de temas > Cabecera y navegación > Formato de cabecera”.

En “estilo de cabecera” seleccionaremos “Pantalla completa” y pulsaremos “Guardar y publicar”.

 

 

Diseño del menú hamburguer full screen header

 

Para personalizar el diseño del menú hamburguesa full screen header (pantalla completa) iremos a “panel de administración > Divi > Personalizador de temas > Cabecera y navegación > Deslizar y Ajustes de título en pantalla completa”.

 

 

 

8.- OCULTAR NAVEGACIÓN HASTA QUE HAYA DESPLAZAMIENTO

 

Otra opción que incorpora la plantilla WordPress Divi es la opción de ocultar el menú de cabecera hasta que el usuario haga scroll.

¿Qué sentido tiene esta opción? Esta opción puede ser adecuada cunado queremos poner una imagen grande como portada de la web y no queremos que esta pierda importancia al aparecer la cabecera del menú. Si ocultamos el menú en primera instancia conseguiremos dar a dicha imagen una relevancia absoluta. Cuando el usuario hace scroll para ver más allá de dicha imagen entonces aparece el menú.

Esta opción se puede combinar con cada uno de los tipos de header o encabezamientos de menú.

 

Configurar opción

 

Para configurar esta opción iremos a: “panel de administración > Divi > Personalizador de temas > Cabecera y navegación > Formato de cabecera”.

Para activar esta opción debemos marcar el check box: “Ocultar navegación hasta que haya desplazamiento”.

 

 

 

9.- MENÚ VERTICAL

 

Aunque ya no son demasiado usados, también podemos usar un menú vertical con Divi. Para activarlo iremos a: “panel de administración > Divi > Personalizador de temas > Cabecera y navegación > Formato de cabecera”.

Ahora debemos marcar el check box: “Habilitar navegación vertical” y pulsar el botón de “guardar y publicar”.

Al marcar la opción de “habilitar navegación vertical” te aparecerá un nuevo check box denominado: “Orientación del menú vertical”. Con esta opción podrás elegir que el menú vertical aparezca en la derecha o izquierda de la web.

 

Cuando este menú se ve en formato móvil desaparece el sidebar y aparece un botón desplegable tipo hamburguesa.

 

Menú vertical con la plantilla Divi

Menú vertical con WordPress y Divi

 

Compártelo ya!!